{extend name="extra@admin/content"}
{block name="button"}
<div class="nowrap pull-rignt" style="margin-top:10px">
<div class="hr-line-dashed"></div>
<span style="color:red;"> 警告：请不要添加重复的原料</span>
</div>
{/block}
{block name="content"}
<style>
.ibox-content{
    overflow-y: scroll;
    overflow-x: hidden;
    height: 500px;
}
</style>
<form id="form1" action="{$url}" data-auto="true" method="post" class='layui-form' style='padding-top:20px'>
    <div class="layui-form-item">
        <div class="layui-inline">
            {if !empty($list)}
                <div class="layui-input-inline" style="width:40px;">
                    <input name="" class="layui-input"  style="border:0px;color:#ff5722;" value="序号" readonly>
                </div>
            {/if}
            <div class="layui-input-inline" >
                <input name="" class="layui-input"  style="border:0px;color:#ff5722;" value="原料" readonly>
            </div>
            <!--<div class="layui-input-inline" >-->
            <!--<input name="" class="layui-input" value="批产量用量/千克" style="border:0px;color:#ff5722;" readonly>-->
            <!--</div>-->
            <!--<div class="layui-input-inline" >-->
            <!--<input name="" class="layui-input" value="批产量用量/克" style="border:0px;color:#ff5722;" readonly>-->
            <!--</div>-->
            <div class="layui-input-inline" style="width:100px;">
                <input name="" class="layui-input" value="单个用量/克" style="border:0px;color:#ff5722;" readonly>
            </div>
            <div class="layui-input-inline" style="width:100px;">
                <input name="" class="layui-input" value="单价" style="border:0px;color:#ff5722;" readonly>
            </div>
            <div class="layui-input-inline" style="width:100px;">
                <input name="" class="layui-input" value="成本" style="border:0px;color:#ff5722;" readonly>
            </div>
            <div class="layui-input-inline" style="width:100px;">
                <input name="" class="layui-input" value="销售价" style="border:0px;color:#ff5722;" readonly>
            </div>
            <div class="layui-input-inline" style="width:100px;">
                <input name="" class="layui-input" value="损耗率" style="border:0px;color:#ff5722;" readonly>
            </div>

        </div>
    </div>
    {if condition="!empty($list)"}
        {foreach name="list" item="v" key="k"}
            <div class="layui-form-item">
                <div class="layui-inline">
                    <div class="layui-input-inline" style="width:40px;">
                        <input type="text" style="font-weight:bold;" name="" required="required"  autocomplete="off" class="layui-input" value="{$k+1}" readonly>
                    </div>
                    <div class="layui-input-inline">
                        <select name="m_id[]" lay-verify="required" readonly="readonly" lay-filter="aihao" lay-search>
                            <option>请选择原料</option>
                            {volist name="material" id="v1"}
                                <option value="{$v1.id}" {if condition="$v.m_id eq $v1.id"} selected {/if} data-price="{$v1.price}" data-sign="{$v1.is_signal}">{$v1.name}/{$v1.unit}</option>
                            {/volist}
                        </select>
                    </div>
                    <!--<div class="layui-input-inline" >-->
                    <!--<input type="text" name="p_use_kg[]" required="required" placeholder="请输入批产量用量(公斤)" autocomplete="off" class="layui-input" value="{$v.p_use_kg}" data-id="{$v.id}" onkeyup="count_chengben(this)">-->
                    <!--</div>-->
                    <!--<div class="layui-input-inline" >-->
                    <!--<input type="text" name="p_use_g[]" required="required" placeholder="批产量用量(克)" autocomplete="off" class="layui-input" value="{$v.p_use_g}" data-id="{$v.id}" placeholder="请输入批产量用量(克)">-->
                    <!--</div>-->
                    <div class="layui-input-inline" style="width:100px;">
                        <input type="text" name="s_use_g[]" required="required" placeholder="单个用量(克)" autocomplete="off" class="layui-input"  value="{$v.s_use_g}" data-id="{$v.id}" onkeyup="count_chengben(this)">
                    </div>
                    <div class="layui-input-inline" style="width:100px;">
                        <input type="text" name="price[]" required="required" placeholder="单价" autocomplete="off" class="layui-input" value="{$v.price}">
                    </div>
                    <div class="layui-input-inline" style="width:100px;">
                        <input type="text" name="chengben[]" required="required" placeholder="成本" autocomplete="off" class="layui-input"  value="{$v.chengben}" data-id="{$v.id}" >
                    </div>
                    <div class="layui-input-inline" style="width:100px;">
                        <input type="text" name="chengben_price[]" required="required" placeholder="销售价" autocomplete="off" class="layui-input"  value="{$v.chengben_price}" data-id="{$v.id}" >
                    </div>
                    <div class="layui-input-inline" style="width:100px;">
                        <input type="text" name="loss[]" required="required" placeholder="损耗率(克)" autocomplete="off" class="layui-input"  value="{$v.loss}" data-id="{$v.id}">
                    </div>
                </div>
                <input type="hidden" name="ids[]" value="{$v.id}">
                {if condition="$k neq 0"}
                <span class="layui-btn tianjiayihan" type="btn" data-id="{$v.id}"  onclick="delspec(this);">移除</span>
                {/if}
            </div>
        {/foreach}
    {else /}
        <div class="layui-form-item">
            <div class="layui-inline">
                <div class="layui-input-inline">
                    <select name="m_id[]" lay-verify="required" readonly="readonly" lay-filter="aihao" lay-search>
                        <option value="">请选择原料</option>
                        {volist name="material" id="v1"}
                            <option value="{$v1.id}" data-price="{$v1.price}" data-sign="{$v1.is_signal}">{$v1.name}/{$v1.unit}</option>
                        {/volist}
                    </select>
                </div>
                <!--<div class="layui-input-inline" >-->
                <!--<input type="text" name="p_use_kg[]" required="required" placeholder="批产量用量(公斤)" autocomplete="off" class="layui-input"   value="" data-id="" title="请输入批产量用量(公斤)" onkeyup="count_chengben(this)">-->
                <!--</div>-->
                <!--<div class="layui-input-inline" >-->
                <!--<input type="text" name="p_use_g[]" required="required" placeholder="批产量用量(克)" autocomplete="off" class="layui-input"   value="" data-id="" title="请输入批产量用量(克)">-->
                <!--</div>-->
                <div class="layui-input-inline" style="width:100px;">
                    <input type="text" name="s_use_g[]" required="required" placeholder="单个用量(克)" autocomplete="off" class="layui-input"   value="" data-id="" title="单个用量(克)" onkeyup="count_chengben(this)">
                </div>
                <div class="layui-input-inline" style="width:100px;">
                    <input type="text" name="price[]" required="required" placeholder="单价" autocomplete="off" class="layui-input"   value="" data-id="" title="请输入单价" readonly>
                </div>
                <div class="layui-input-inline" style="width:100px;">
                    <input type="text" name="chengben[]" required="required" placeholder="成本" autocomplete="off" class="layui-input"   value="" data-id="" title="成本">
                </div>
                <div class="layui-input-inline" style="width:100px;">
                    <input type="text" name="chengben_price[]" required="required" placeholder="销售价" autocomplete="off" class="layui-input"   value="" data-id="" title="销售价">
                </div>
                <div class="layui-input-inline" style="width:100px;">
                    <input type="text" name="loss[]" required="required" placeholder="损耗率(克)" autocomplete="off" class="layui-input"   value="" data-id="" title="损耗率(克)">
                </div>
            </div>
        </div>
    {/if}
    <div class="hr-line-dashed" id=add></div>
    {if !empty($list)}
         <div class="layui-form-item">
            <div class="layui-inline">
                <div class="layui-input-inline" >
                    <input type="text" name="" required="required"  autocomplete="off" class="layui-input" style="font-weight:bold;border:0px solid #e6e6e6;text-align: right;" value="总重量(g)：" readonly>
                </div>
                <div class="layui-input-inline" style="width:100px;">
                    <input type="text" id="all_kg" name="" required="required" placeholder="单个用量(克)" autocomplete="off" class="layui-input"  value="{$peifang.yongliao}" readonly>
                </div>
                <div class="layui-input-inline" >
                    <input type="text" name="" required="required"  autocomplete="off" class="layui-input" style="font-weight:bold;border:0px solid #e6e6e6;text-align: right;" value="成本合计(元)： " readonly>
                </div>
                <div class="layui-input-inline" style="width:100px;">
                    <input type="text" id="all_price" name="" required="required" placeholder="单价" autocomplete="off" class="layui-input" readonly value="{$peifang.chengben}">
                </div>
            </div>
        </div>
    {/if}
    <div class="col-sm-4 col-sm-offset-2">
        <input type='hidden' value='{$id}' name='p_id'/>
        <input type="hidden" name="sign" value="1">
        <div class="layui-form-item text-center">
            <button class="layui-btn" type="button" onclick="tianjia()">添加</button>
            <button class="layui-btn" type="submit">保存</button>
        </div>
    </div>
    <script type="text/javascript">
        var num = "{$num}";
        layui.use('form', function(){
            var form = layui.form;      //只有执行了这一步，部分表单元素才会自动修饰成功
            form.render();
        });
        /**
         * 添加属性
         * @Author   lingyun
         * @DateTime 2017-11-30T19:50:42+0800
         * @return   {[type]}                 [description]
         */
        function tianjia(){
            if(num != 0){
                num = parseInt(num)+1;
                var ht = '<div class="layui-form-item"><div class="layui-inline"><div class="layui-input-inline" style="width:40px;"><input type="text" style="font-weight:bold;" name="" required="required"  autocomplete="off" class="layui-input" value="'+num+'" readonly></div><div class="layui-input-inline"><select name="m_id[]" lay-verify="required" readonly="readonly" lay-filter="aihao" lay-search><option value="">请选择原料</option>{volist name="material" id="v1"}<option value="{$v1.id}" data-price="{$v1.price}" data-sign="{$v1.is_signal}">{$v1.name}/{$v1.unit}</option>{/volist}</select></div><div class="layui-input-inline" style="width:100px;"><input type="text" name="s_use_g[]" required="required" placeholder="单个用量(克)" autocomplete="off" class="layui-input"  value="" data-id="" title="单个用量(克)" onkeyup="count_chengben(this)"></div><div class="layui-input-inline" style="width:100px;"><input type="text" name="price[]" required="required" placeholder="单价" autocomplete="off" class="layui-input"   value=""data-id="" title="请输入单价" readonly></div><div class="layui-input-inline" style="width:100px;"><input type="text" name="chengben[]" required="required" placeholder="成本" autocomplete="off" class="layui-input"   value=""data-id="" title="成本"></div><div class="layui-input-inline" style="width:100px;"><input type="text" name="chengben_price[]" required="required" placeholder="销售价" autocomplete="off" class="layui-input"  value="" data-id="" title="销售价"></div><div class="layui-input-inline" style="width:100px;"><input type="text" name="loss[]" required="required" placeholder="损耗率(克)" autocomplete="off" class="layui-input"   value=""data-id="" title="损耗率(克)"></div></div><span class="layui-btn tianjiayihan" type="btn" onclick="reduce(this);">移除</span></div>';
            }else{
                var ht = '<div class="layui-form-item"><div class="layui-inline"><div class="layui-input-inline"><select name="m_id[]" lay-verify="required" readonly="readonly" lay-filter="aihao" lay-search><option value="">请选择原料</option>{volist name="material" id="v1"}<option value="{$v1.id}" data-price="{$v1.price}" data-sign="{$v1.is_signal}">{$v1.name}/{$v1.unit}</option>{/volist}</select></div><div class="layui-input-inline" style="width:100px;"><input type="text" name="s_use_g[]" required="required" placeholder="单个用量(克)" autocomplete="off" class="layui-input"  value="" data-id="" title="单个用量(克)" onkeyup="count_chengben(this)"></div><div class="layui-input-inline" style="width:100px;"><input type="text" name="price[]" required="required" placeholder="单价" autocomplete="off" class="layui-input"   value=""data-id="" title="请输入单价" readonly></div><div class="layui-input-inline" style="width:100px;"><input type="text" name="chengben[]" required="required" placeholder="成本" autocomplete="off" class="layui-input"   value=""data-id="" title="成本"></div><div class="layui-input-inline" style="width:100px;"><input type="text" name="chengben_price[]" required="required" placeholder="销售价" autocomplete="off" class="layui-input"  value="" data-id="" title="销售价"></div><div class="layui-input-inline" style="width:100px;"><input type="text" name="loss[]" required="required" placeholder="损耗率(克)" autocomplete="off" class="layui-input"   value=""data-id="" title="损耗率(克)"></div></div><span class="layui-btn tianjiayihan" type="btn" onclick="reduce(this);">移除</span></div>';
            }

            // var html = ht;
            // var html = '<div class="layui-form-item">'+ht+'</div>';
            // alert(html);
            $("#add").before(ht);
            window.form.render('select'); //刷新select选择框渲染
            $('#create').empty();       //清空元素内部元素
        }
        function reduce(obj){
            $(obj).parent().remove();
        }

        /**
         * 生成属性
         * @Author   lingyun
         * @DateTime 2017-11-30T20:09:49+0800
         * @return   {[type]}                 [description]
         */
        function createspec(){
            var spec_id = new Array();      //属性id
            var spec_name = new Array();    //属性的名称
            var title = new Array();    //属性分类 1140-18 = 1122
            var goods_id = $('input[name=goods_id]').val();
            var status = 1;
            $("select option:selected").each(function(){
                if($(this).parent().parent().parent().find('input[name="detail[]"]').val() == ''){
                    status = 0;     //结束标志
                    layer.msg('请输入属性名称');
                    return false;
                }
                var specid = $(this).val();
                var specname = $(this).parent().parent().parent().find('input[name="detail[]"]').val();
                var speccate = $(this).text();
                var titles = speccate+': '+specname;     //组合属性名称
                // if(spec_id.indexOf(specid)<0){    //不存在返回-1
                spec_id.push(specid);
                // }
                // if(specname.indexOf(spec_name)<0){
                spec_name.push(specname);
                // }
                // if(specname.indexOf(spec_name)<0){
                title.push(titles);
                // }
            });
            if(status == 0){
                return false;
            }
            $.post('{:url("Goodsspec/addspeccate")}',
                {goods_id:goods_id,spec_id:spec_id,spec_name:spec_name,title:title},
                function(data){
                    $('#create').empty();       //清空元素内部元素
                    $("#create").append(data.msg);
                    return false;
                });
            return false;
        }
        //删除商品属性
        function delspec(obj){
            var id = $(obj).attr('data-id');
            var ve = $(obj).attr('data-val');
            var goods_id = $('input[name=goods_id').val();
            $.post('{:url("Peifang/delspec")}',
                {id:id,goods_id:goods_id},
                function(data){
                    if(data.code == 1){
                        $(obj).parent().remove();
                    }
                    // $("input[name='title[]']").each(function(){
                    //     if($(obj).val().indexOf(ve)>=0){
                    //         $(obj).parent().remove();
                    //     }
                    // });
//                $(obj).parent().remove();       //移除元素
//                $('#create').empty();       //清空元素内部元素
//                $("#create").append(data.msg);
                    return false;
                });
            return false;
        }
        /**
         * 删除商品属性详情
         * @Author   lingyun
         * @DateTime 2017-12-01T15:03:30+0800
         * @return   {[type]}                 [description]
         */
        function del(obj,database){
            var id = $(obj).attr('data-id');
            $.post('{:url("Goodsspec/del")}',
                {id:id,database:database},
                function(data){
                    $(obj).parent().remove();       //移除元素
                    // $('#create').empty();       //清空元素内部元素
                    // $("#create").append(data.msg);
                    return false;
                });
            return false;
        }
        /**
         * 修改属性详情值
         * @Author   lingyun
         * @DateTime 2017-12-01T15:46:45+0800
         * @return   {[type]}                 [description]
         */
        function saveval(obj,field){
            var id = $(obj).attr('data-id');
            var val = $(obj).val();
            $.post('{:url("Goodsspec/saveval")}',
                {id:id,val:val,field:field},
                function(data){
                    if(data.code == 1){
                        // layer.msg('修改成功');
                    }
                    // $(obj).parent().remove();       //移除元素
                    // $('#create').empty();       //清空元素内部元素
                    // $("#create").append(data.msg);
                    return false;
                });
            return false;
        }
        /**
         * 修改属性名称，一旦修改则重新生成属性组合
         * @Author   lingyun
         * @DateTime 2017-12-01T15:54:50+0800
         * @return   {[type]}                 [description]
         */
        function savespec(obj){
            var id = $(obj).attr('data-id');
            var val = $(obj).val();
            var goods_id = $('input[name=goods_id]').val();
            var material_id = $(obj).parent().parent().find('select option:checked').val();
            $.post('{:url("Peifang/savespec")}',
                {id:id,num:val,goods_id:goods_id,material_id:material_id},
                function(data){
                    // $(obj).parent().remove();       //移除元素
                    if(data.code == 1){
                        var spec_name = data.data.spec_name;
                        var reg = new RegExp(spec_name,"ig")
                        $("input[name='title[]']").each(function(){
                            var obj = $(this);
                            obj.val(obj.val().replace(reg,val));
                        });
                        layer.msg(data.msg, {
                            icon: 1,
                            time: 1000 //2秒关闭（如果不配置，默认是3秒）
                        }, function () {
//                $("#sub").removeAttr("disabled");
                        });
//                    location.reload();
                    }
                    // $("#create").append(data.msg);
                    return false;
                });
            return false;
        }

        /**
         * 计算成本
         */
        function count_chengben(obj){
            var price = parseFloat($(obj).parent().parent().find('select option:selected').attr('data-price')).toFixed(2);        //原料价格
            var num = parseFloat($(obj).val());     //使用数量
            if($(obj).parent().parent().find('option:selected').attr('data-sign') == 1){
                var chengben = parseFloat(parseFloat(price)*parseFloat(num)).toFixed(6);
            }else{
                var chengben = parseFloat(parseFloat(price)*parseFloat(num)/1000).toFixed(6);
            }

            $(obj).parent().parent().find("input[name='chengben[]']").val(chengben);
        }

        form.on('select(aihao)', function(data){
            var price = parseFloat($(data.elem).find('option:selected').attr('data-price')).toFixed(2);
            var num = parseFloat($(data.elem).parent().parent().find("input[name='s_use_g[]']").val());     //使用数量
            $(data.elem).parent().parent().find('input[name="price[]"]').val(price);
            if(num == 0){
                $(data.elem).parent().parent().find("input[name='chengben[]']").val(0);
            }else{
                if($(data.elem).find("option:selected").attr("data-sign") == 1){
                    var chengben = parseFloat(parseFloat(price)*parseFloat(num)).toFixed(6);
                }else{
                    var chengben = parseFloat(parseFloat(price)*parseFloat(num)/1000).toFixed(6);
                }
                $(data.elem).parent().parent().find("input[name='chengben[]']").val(chengben);
            }
        });
</script>
</form>
{/block}